<template>
  <el-dialog
    class="business-collection"
    v-el-drag-dialog="{ drag: true, full: false, resize: false }"
    title="添加业务收款"
    :close-on-click-modal="false"
    :visible="true"
    @close="closeMd"
    :width="'80%'">
    <div class="bank-account">
      <div ref="dgtools" class="filter-container">
        <div class="dgts-fm">
          <el-input
            clearable
            style="width: 120px"
            placeholder="对方户名"
            v-model="dg.ps.transName">
          </el-input>

          <el-input
            clearable
            style="width: 120px"
            placeholder="客户名称"
            v-model="dg.ps.cusName">
          </el-input>

          <el-select
            v-model="dg.ps.timeType"
            placeholder="时间查询类型"
            style="width: 100px">
            <el-option label="添加时间" value="0"></el-option>
            <el-option label="交易时间" value="1"></el-option>
          </el-select>

          <el-date-picker
            v-model="dg.ps.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            clearable
            style="width: 210px"
          />

          <el-input
            style="width: 120px"
            maxlength="6"
            placeholder="交易金额"
            v-model="dg.ps.findMoney">
          </el-input>

          <!-- <el-select
            clearable
            v-model="dg.ps.isCheck"
            placeholder="报销状态"
            style="width: 100px">
            <el-option label="已结算" value="-1"></el-option>
            <el-option label="未操作" value="0"></el-option>
            <el-option label="已报销" value="1"></el-option>
          </el-select> -->

          <el-select
            clearable
            v-model="dg.ps.moneyType"
            placeholder="请选择金额类型"
            style="width: 130px">
            <el-option
              v-for="item in moneyOptions"
              :key="item.id"
              :label="item.typeName"
              :value="item.id">
            </el-option>
          </el-select>

          <!-- <el-input
            clearable
            style="width: 130px"
            placeholder="操作编号"
            v-model="dg.ps.operMark">
          </el-input> -->

          <el-input
            clearable
            style="width: 180px"
            placeholder="摘要"
            v-model="dg.ps.remark">
          </el-input>

          <!-- <el-select
            clearable
            v-model="dg.ps.settleUname"
            placeholder="结算人账号选择"
            style="width: 135px">
            <el-option
              v-for="item in staffOptions"
              :key="item.baseUserId.uname"
              :label="item.baseUserId.realName"
              :value="item.baseUserId.uname">
            </el-option>
          </el-select> -->

          <!-- <el-select
            clearable
            v-model="dg.ps.status"
            placeholder="收支情况"
            style="width: 100px">
            <el-option label="收入" value="0"></el-option>
            <el-option label="支出" value="1"></el-option>
          </el-select> -->

          <!-- <el-input
            clearable
            style="width: 130px"
            placeholder="下订单账号"
            v-model="dg.ps.orderNum">
          </el-input> -->

          <!-- <el-select
            clearable
            v-model="dg.ps.operUname"
            placeholder="请选择操作员"
            style="width: 120px">
            <el-option
              v-for="item in staffOptions"
              :key="item.baseUserId.id"
              :label="item.baseUserId.realName"
              :value="item.baseUserId.id">
            </el-option>
          </el-select> -->

          <el-button 
            type="primary" 
            icon="el-icon-search" 
            @click="getDgList">
            搜索
          </el-button>

          <el-button 
            type="primary" 
            @click="handleSumbit">
            确认收款
          </el-button>
        </div>

        <TableSelfSet 
          v-if="dg.columns.length > 0" 
          :tbTitle="'添加业务收款列表'" 
          :dgName="dg.dgName" 
          :tbId="dg.tbName" 
          :srcCols="dg.srcCols" 
          :columns="dg.columns" 
          @saveSet="saveTbSet"
        />
      </div>

      <el-table
        :ref="dg.tbName"
        :data="dg.list"
        row-key="id"
        :height="bodyHeight - 100"
        border fit
        :row-class-name="rowClassName"
        @header-dragend="dragHeader"
        @selection-change="selRowChange">
        <el-table-column fixed="left" type="selection" width="40" :resizable="false"></el-table-column>
        <el-table-column 
          v-for="(col, index) in dg.columns" 
          :key="index"
          :class-name="dg.dgName"
          :prop="col.field"
          :label="col.label"
          :width="col.width">
          <template slot-scope="{row}">
            <template v-if="col.field == 'tradeTime'">
              {{row.tradeTime | time('yyyy年MM月dd号 HH:mm')}}
            </template>

            <template v-else-if="col.field == 'operUser'">
              <span>{{ row.operUser ? row.operUser : '' }}</span>
            </template>

            <template v-else-if="col.field == 'isCheck'">
              <span>{{ getCheckText(row) }}</span>
            </template>

            <template v-else-if="col.field == 'cusName'">
              <span>{{ row.cusName ? row.cusName.split('-')[0] : '' }}</span>
            </template>

            <template v-else>{{ getColVal(row, col.field) }}</template>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        v-show="dg.total > 0"
        :total="dg.total"
        :page.sync="dg.ps.page"
        :limit.sync="dg.ps.rows"
        @pagination="getDgList"
      />

      <!-- <input
        ref="inputRef"
        type="file"
        id="file"
        name="file"
        style="display: none"
        @change="handleChange"
      /> -->

      <div>
        <span>收款备注 </span>
        <el-input v-model="fm.ps.remark" style="width: 200px" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";
import DataGridBase from "@/views/mixins/DataGridBase";
import DataGridResize from "@/views/mixins/DataGridResize";
import TableSelfSet from '@/components/TableSelfSet';
import Pagination from "@/components/Pagination";

import * as commonSer from "@/api/services/common.service";
import { getBankTradeList, serviceGath } from "@/api/services/order.service";

export default {
  name: "BusinessCollection",
  directives: { elDragDialog },
  mixins: [DataGridBase, DataGridResize],
  components: { Pagination, TableSelfSet },
  props: {myData: Object},
  data() {
    let cols = [
      {label: '标示号', field: 'unitNum', width: 90},
      {label: '交易时间', field: 'tradeTime', width: 150},
      {label: '下账人', field: 'operUser', width: 100},
      {label: '银行名称', field: 'myBankName', width: 140},
      {label: '我的银行账号', field: 'myBankNum', width: 180},
      {label: '报销状态', field: 'isCheck', width: 100},
      {label: '金额类型', field: 'moneyTypeId.typeName', width: 100},
      {label: '客户名称', field: 'cusName', width: 120},
      {label: '借', field: 'tradeInMoney', width: 100},
      {label: '对方户名', field: 'transName', width: 120},
      {label: '对方账号', field: 'transNum', width: 150},
      {label: '添加时间', field: 'addTime', width: 150},
      {label: '贷', field: 'tradeOutMoney', width: 100},
      {label: '余额', field: 'balance', width: 100},
      {label: '摘要', field: 'remark', width: 150},
      {label: '操作备注', field: 'opermark', width: 150}
    ];
    return {
      isMoreOne: this.myData.isMoreOne,

      dg: {
        dgName: 'dg',
        tbName: 'businessCollectionTb',
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {// 过滤参数
          page: 1, rows: 20,
          // 银行账号
          bankNo: "", 
          // 对方户名
          transName: "", 
          // 客户名称
          cusName: "", 
          // 时间查询类型
          timeType: "0", 
          setime: [],
          // 结束时间
          eTime: "", 
          // 开始时间
          sTime: "",
          // 交易金额 
          findMoney: "", 
          // 报销状态
          isCheck: "0", 
          // 财务备注
          financeNote: "", 
          // 金额类型id
          moneyType: "", 
          // 操作编号
          operMark: "", 
          // 摘要
          remark: "", 
          // 结算人账号
          settleUname: "", 
          // 收支情况 0-收入 1-支出
          status: "0", 
          // 下账订单号
          orderNum: "", 
          // 下账人uname
          operUname: "", 
        },
      },

      moneyOptions: [],
      // bankOptions: [],
      staffOptions: [],

      fm: {
        fname: "businessCollectionFm",
        sb: { load: false, text: "确认添加" },
        ps: {
          // 银行ID
          btlIds: [], 
          // 订单Id
          orderIds: [],
          // 财务备注 
          remark: "", 
        },
      },
    };
  },
  created() {
    this.initTbSetData(this.dg.dgName);

    this.getDgList();

    this.init();
  },
  methods: {
    /* 关闭弹框 */
    closeMd() {
      this.$emit("myClick", {state: false});
    },
    init() {
      commonSer.getMoneyTypeDict().then((res) => {
        this.moneyOptions = res.mTypes;
      });
      // getBankListDict().then((res) => {
      //   this.bankOptions = res.banks;
      // });
      commonSer.getStaffCombo({ isContainDriver: 1 }).then((res) => {
        this.staffOptions = res.data;
      });
    },
    // handleChange(e) {
    //   let file = e.target.files[0];
    //   this.UploadFile(file);
    // },
    // 获取-表格数据
    getDgList() {
      const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);

      ps.sTime = ps.setime && ps.setime.length > 0 ? setime[0] : '';
      ps.eTime = ps.setime && ps.setime.length > 0 ? setime[1] : '';

      getBankTradeList(ps).then((res) => {
        const { totalPay, totalGath, bankBalance, code, data, count } = res;
        if (code === 1) {
          for(let i in data){ data[i].dgName = dg.dgName; }

          // this.totalPay = totalPay;
          // this.totalGath = totalGath;
          // this.bankBalance = bankBalance;
          dg.list = data;
          dg.total = count;
        }
      });
    },
    // 获取-报销状态描述
    getCheckText(row) {
      let state = { "-1": "已结算", "0": "未操作", "1": "已报销" };
      return state[row.isCheck] || "--";
    },

    // 提交确认收款
    handleSumbit() {
      const that = this, U = that.U, fm = that.fm, ps = U.scopy(fm.ps), rows = that.getSeledRows();

      if(rows.length !== 1){
        U.qerror("请选择一条数据");
      }else if(that.isMoreOne == "one" && rows.length > 1){
        U.qerror("你选择了2个以上的订单，只能选择一个银行账");
      }else{
        const orderIdArr = that.myData.obj.map(it => it.id);

        const bankIdArr = rows.map(it => it.id);
        ps.orderIds = orderIdArr;
        ps.btlIds = bankIdArr;
        serviceGath(ps).then((res) => {
          fm.sb.load = false;

          if (res.code == 1) {
            U.qsuccess(res.msg);
            
            // 调用父组件方法-重新加载数据
            that.$emit("reloadDg");
            that.closeMd();
          } else {
            U.qsuccess(res.msg);
          }
        });
      }

    },
  },
};
</script>